<div data-jc-scope="?" class="hidden" data-jc-class="hidden">

	<div data-jc="visible" data-jc-path="response" data-if="value && value.success === true" class="hidden">
		<div class="message-success"><span class="fa fa-check-circle"></span>Thanks, the contact form has been sent successfully.</div>
		<br />
	</div>

	<div data-jc="visible" data-jc-path="response" data-if="!value || !value.success">
		<div class="row">
			<div class="col-md-6 m">
				<div data-jc="textbox" data-jc-path="firstname" data-required="true" data-jc-value="''">First name</div>
			</div>
			<div class="col-md-6 m">
				<div data-jc="textbox" data-jc-path="lastname" data-required="true" data-jc-value="''">Last name</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 m">
				<div data-jc="textbox" data-jc-path="email" data-required="true" data-jc-type="email" data-jc-value="'@'">Email address</div>
			</div>
			<div class="col-md-6 m">
				<div data-jc="textbox" data-jc-path="phone" data-jc-value="''">Phone number</div>
			</div>
		</div>
		<br />
		<div class="row">
			<div class="col-md-12 m">
				<div data-jc="textarea" data-jc-path="message" data-required="true" data-height="100px" data-jc-value="''">Message</div>
			</div>
		</div>
		<div data-jc="error" data-jc-path="response"></div>
		<br />
		<div class="row">
			<div class="col-md-6">
				<div data-jc="validation" data-jc-path="?">
					<button class="button exec" disabled="disabled" data-exec="#contactform.submit">SUBMIT FORM</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	OPERATION('contactform.submit', function(el) {
		var component = el.closest('[data-jc-path]').component();
		var scope = component.pathscope;
		RESET(scope + '.*');
		AJAX('POST /api/contact/', GET(scope), scope + '.response');
	});
</script>